<!-- 用户登录界面 -->
<template>
  <div id="login">
    <div class="bg"></div>
    <el-row class="main-container">
      <el-col :lg="8" :xs="20" :md="10" :span="10">
       
        <div class="top">
          <div class="title">
            <img src="../assets/img/dang.png" alt="">
          </div>
        </div> 
        <div class="bottom">
          <div class="container">
            <el-form :label-position="labelPosition" label-width="80px">
             
              <div>
                <el-input placeholder="请输入用户名" v-model="id">
                  <template slot="prepend"><i class="el-icon-user-solid"></i></template>
                </el-input>
              </div>
              <div class="input2">
                <el-input placeholder="请输入密码" v-model="password" type='password'>
                  <template slot="prepend"><i class="el-icon-unlock"></i></template>
                </el-input>
              </div>
              <div class="submit">
                <el-button type="primary" class="row-login" @click="login()">登录</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="footer">
      <el-col>
        <p class="msg2"></p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      labelPosition: "left",
      id: '',
      password: ''
      
    };
  },
  methods: {
    //用户登录请求后台处理
    login() {
      console.log("登录操作执行-------");
    this.$http.post("Login/login.do",{ id:this.id, password:this.password }).then(
      result=>{
        console.log(result.body)
        
        /* 
        if(this.formLabelAlign != null){
          this.$cookies.set("cName", his.formLabelAlign.id)
          this.$cookies.set("cPwd", his.formLabelAlign.password)
           this.$router.push({ path: "/index" }); //跳转到首页
        }else{
          this.$message({ //错误提示
          showClose: true,
          type: "error",
          message: "用户名或者密码错误",
          center: true
        });
        } */
      }
    )
     
    }
  }
};
</script>

<style scoped>
.container {
  margin-bottom: 32px;
}
.container .el-radio-group {
  margin: 30px 0px;
}
a:link {
  color: #ff962a;
  text-decoration: none;
}
#login {
  font-size: 14px;
  color: #000;
  background-color: #fff;
}
#login .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background: url('../assets/img/b5.jpg')center top / cover no-repeat; 

}
.input2 {
  margin-top: 10px;
}
#login .main-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#login .main-container .top {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}
 .top .title {
  width: 100px;
  height: 100px;
 border-radius: 50%;

 
}
.top .title img {
 width: 100%;
 border-radius: 50%;
 
}

#login .bottom {
  
  padding: 30px;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  margin: 10px 0;
  font-size: 16px;
  box-shadow: 1px 10px 20px rgba(238, 60, 60, 0.6);
}

.bottom .submit .row-login {
  width: 100%;
  background-color: red;
 border: none;
 margin-top: 50px;
  padding: 15px 20px;
}
.bottom .submit {
  display: flex;
  justify-content: center;
}
.footer {
  text-align: center;
}

.footer .msg2 {
  font-size: 14px;
  color: #e3e3e3;
  margin-top: 80px;
  width: 50px;
}

</style>
